<template>
  <div>
    <Dialog>
      <template v-slot:title>
        <h1>这是食品表格</h1>
      </template>
      <!-- <template #default> -->
      <table border="1">
        <thead>
          <th>食品名称</th>
          <th>价格</th>
        </thead>
        <tbody>
          <tr>
            <td>猪脚饭</td>
            <td>16</td>
          </tr>
          <tr>
            <td>牛肉饺子</td>
            <td>23</td>
          </tr>
          <tr>
            <td>KFC</td>
            <td>33</td>
          </tr>
        </tbody>
      </table>
      <!-- </template> -->
      <template #footer>
        <button>查询</button>
      </template>
    </Dialog>
    <hr />
    <Dialog>
      <!-- v-slot:可以简写成# -->
      <template #title>
        <p style="color: red">表单提交</p>
      </template>
      <form>
        <p>用户名:<input /></p>
        <p>密码:<input /></p>
        <!-- <p>
          <button>登录</button>
        </p> -->
      </form>
      <template #footer>
        <button>取消</button>&nbsp;
        <button>登录</button>
      </template>
    </Dialog>
  </div>
</template>

<script>
import Dialog from './Dialog'
export default {
  components: {
    Dialog
  }
}
</script>
